<template>
	<button
		class="tui-btn"
		:class="[
			plain ? 'tui-' + type + '-outline' : 'tui-btn-' + (type || 'primary'),
			getDisabledClass(disabled, type, plain),
			getShapeClass(shape, plain),
			getShadowClass(type, shadow, plain),
			bold ? 'tui-text-bold' : '',
			link ? 'tui-btn__link' : '',
			width === '100%' || !width || width === true ? 'tui-btn__flex-1' : ''
		]"
		:hover-class="getHoverClass(disabled, type, plain)"
		:style="{ width: width, height: height, lineHeight: height, fontSize: size + 'rpx' }"
		:loading="loading"
		:form-type="formType"
		:open-type="openType"
		@getuserinfo="bindgetuserinfo"
		@getphonenumber="bindgetphonenumber"
		@contact="bindcontact"
		@error="binderror"
		:disabled="disabled"
		@tap.stop="handleClick"
	>
		<slot></slot>
	</button>
</template>

<script>
export default {
	name: 'tuiButton',
	emits: ['click', 'getuserinfo', 'contact', 'getphonenumber', 'error'],
	// #ifndef VUE3
	// #ifndef MP-QQ
	behaviors: ['wx://form-field-button'],
	// #endif
	// #endif
	props: {
		//样式类型 primary, error, warning, success, gray，white, black ,gray-black ,gray-primary ,gray-error ,gray-warning ,gray-success
		type: {
			type: String,
			default: 'primary'
		},
		//是否加阴影
		shadow: {
			type: Boolean,
			default: false
		},
		// 宽度 rpx或 %
		width: {
			type: String,
			default: '100%'
		},
		//高度 rpx
		height: {
			type: String,
			default: '88rpx'
		},
		//字体大小 rpx
		size: {
			type: Number,
			default: 32
		},
		bold: {
			type: Boolean,
			default: false
		},
		margin: {
			type: String,
			default: '0'
		},
		//形状 circle(圆角), square(默认方形)，rightAngle(平角)
		shape: {
			type: String,
			default: 'square'
		},
		plain: {
			type: Boolean,
			default: false
		},
		//link样式，去掉边框，结合plain一起使用
		link: {
			type: Boolean,
			default: false
		},
		disabled: {
			type: Boolean,
			default: false
		},
		//禁用后背景是否为灰色 （非空心button生效）
		disabledGray: {
			type: Boolean,
			default: false
		},
		loading: {
			type: Boolean,
			default: false
		},
		formType: {
			type: String,
			default: ''
		},
		openType: {
			type: String,
			default: ''
		},
		index: {
			type: [Number, String],
			default: 0
		},
		//是否需要阻止重复点击【默认200ms】
		preventClick: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			time: 0
		}
	},
	methods: {
		handleClick() {
			if (this.disabled) return
			if (this.preventClick) {
				if (new Date().getTime() - this.time <= 200) return
				this.time = new Date().getTime()
				setTimeout(() => {
					this.time = 0
				}, 200)
			}
			this.$emit('click', {
				index: Number(this.index)
			})
		},
		bindgetuserinfo({ detail = {} } = {}) {
			this.$emit('getuserinfo', detail)
		},
		bindcontact({ detail = {} } = {}) {
			this.$emit('contact', detail)
		},
		bindgetphonenumber({ detail = {} } = {}) {
			this.$emit('getphonenumber', detail)
		},
		binderror({ detail = {} } = {}) {
			this.$emit('error', detail)
		},
		getShadowClass: function(type, shadow, plain) {
			let className = ''
			if (shadow && type != 'white' && !plain) {
				className = 'tui-shadow-' + type
			}
			return className
		},
		getDisabledClass: function(disabled, type, plain) {
			let className = ''
			if (disabled && type != 'white' && type.indexOf('-') == -1) {
				let classVal = this.disabledGray ? 'tui-gray-disabled' : 'tui-dark-disabled'
				className = plain ? 'tui-dark-disabled-outline' : classVal
			}
			return className
		},
		getShapeClass: function(shape, plain) {
			let className = ''
			if (shape == 'circle') {
				className = plain ? 'tui-outline-fillet' : 'tui-fillet'
			} else if (shape == 'rightAngle') {
				className = plain ? 'tui-outline-rightAngle' : 'tui-rightAngle'
			}
			return className
		},
		getHoverClass: function(disabled, type, plain) {
			let className = ''
			if (!disabled) {
				className = plain ? 'tui-outline-hover' : 'tui-' + (type || 'primary') + '-hover'
			}
			return className
		}
	}
}
</script>

<style lang="scss" scoped>
.tui-btn-primary {
	background: $primary !important;
	color: #fff;
}

.tui-shadow-primary {
	box-shadow: 0 10rpx 14rpx 0 rgba(86, 119, 252, 0.2);
}

.tui-btn-error {
	background: $error !important;
	color: #fff;
}

.tui-shadow-error {
	box-shadow: 0 10rpx 14rpx 0 rgba(235, 9, 9, 0.2);
}

.tui-btn-warning {
	background: $warning !important;
	color: #fff;
}

.tui-shadow-warning {
	box-shadow: 0 10rpx 14rpx 0 rgba(252, 135, 45, 0.2);
}

.tui-btn-success {
	background: $success !important;
	color: #fff;
}

.tui-shadow-success {
	box-shadow: 0 10rpx 14rpx 0 rgba(7, 193, 96, 0.2);
}

.tui-btn-white {
	background: #fff !important;
	color: #333 !important;
}

.tui-btn-gray {
	background: #bfbfbf !important;
	color: #fff !important;
}

.tui-btn-black {
	background: #333 !important;
	color: #fff !important;
}

.tui-btn-gray-black {
	background: #f8f8f8 !important;
	color: #333;
}

.tui-gray-black-hover {
	background: #d9d9d9 !important;
}

.tui-btn-gray-primary {
	background: #f8f8f8 !important;
	color: $primary !important;
	/* #ifdef MP-QQ */
	border: 0 !important;
	/* #endif */
}

.tui-gray-primary-hover {
	background: #d9d9d9 !important;
}

.tui-btn-gray-success {
	background: #f8f8f8 !important;
	color: $success !important;
	/* #ifdef MP-QQ */
	border: 0 !important;
	/* #endif */
}

.tui-gray-success-hover {
	background: #d9d9d9 !important;
}

.tui-btn-gray-error {
	background: #f8f8f8 !important;
	color: $error !important;
	/* #ifdef MP-QQ */
	border: 0 !important;
	/* #endif */
}

.tui-gray-error-hover {
	background: #d9d9d9 !important;
}

.tui-btn-gray-warning {
	background: #f8f8f8 !important;
	color: $warning !important;
	/* #ifdef MP-QQ */
	border: 0 !important;
	/* #endif */
}

.tui-gray-warning-hover {
	background: #d9d9d9 !important;
}

.tui-shadow-gray {
	box-shadow: 0 10rpx 14rpx 0 rgba(191, 191, 191, 0.2);
}

.tui-hover-gray {
	background: #f7f7f9 !important;
}

.tui-black-hover {
	background: #555 !important;
	color: #e5e5e5 !important;
}

/* button start*/

.tui-btn {
	width: 100%;
	position: relative;
	/* #ifndef MP-QQ */
	border: 0 !important;
	/* #endif */
	/* #ifdef MP-QQ */
	border: 1rpx solid;
	box-sizing: border-box;
	/* #endif */
	border-radius: 6rpx;
	padding-left: 0;
	padding-right: 0;
	overflow: visible;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tui-btn__flex-1 {
	flex: 1;
}

/* #ifndef MP-QQ */
.tui-btn::after {
	content: '';
	position: absolute;
	width: 200%;
	height: 200%;
	transform-origin: 0 0;
	transform: scale(0.5, 0.5) translateZ(0);
	box-sizing: border-box;
	left: 0;
	top: 0;
	border-radius: 12rpx;
	border: 0;
}

/* #endif */

/* #ifdef MP-BAIDU */
/* .tui-btn:active::after {
		background-color: rgba(0, 0, 0, 0.2) !important;
	} */
/* #endif */

.tui-text-bold {
	font-weight: bold;
}

/* #ifdef MP-QQ */
.tui-btn-white {
	border: 1rpx solid #bfbfbf;
}

/* #endif */

/* #ifndef MP-QQ */
.tui-btn-white::after {
	border: 1px solid #bfbfbf;
}

/* #endif */

.tui-white-hover {
	background: #e5e5e5 !important;
	color: #2e2e2e !important;
}

.tui-dark-disabled {
	opacity: 0.3 !important;
	color: #fafbfc !important;
}

.tui-dark-disabled-outline {
	/* #ifdef MP-QQ */
	border: 0 !important;
	/* #endif */
	opacity: 0.5 !important;
}

.tui-gray-disabled {
	background: #f3f3f3 !important;
	color: #919191 !important;
	box-shadow: none;
}

.tui-outline-hover {
	opacity: 0.5 !important;
}

.tui-primary-hover {
	background: $uni-primary-disable !important;
	color: #e5e5e5 !important;
}

/* #ifndef MP-QQ */
.tui-primary-outline::after {
	border: 1px solid $primary !important;
}

/* #endif */

.tui-primary-outline {
	color: $primary !important;
	background: transparent;
	/* #ifdef MP-QQ */
	border: 1rpx solid #5677fc !important;
	/* #endif */
}

.tui-error-hover {
	background: $uni-error-disable !important;
	color: #e5e5e5 !important;
}

.tui-error-outline {
	color: $error !important;
	background: transparent;
	/* #ifdef MP-QQ */
	border: 1rpx solid $error !important;
	/* #endif */
}

/* #ifndef MP-QQ */
.tui-error-outline::after {
	border: 1px solid $error !important;
}

/* #endif */

.tui-warning-hover {
	background: $uni-warning-disable !important;
	color: #e5e5e5 !important;
}

.tui-warning-outline {
	color: $warning !important;
	background: transparent;
	/* #ifdef MP-QQ */
	border: 1rpx solid $warning !important;
	/* #endif */
}

/* #ifndef MP-QQ */
.tui-warning-outline::after {
	border: 1px solid $warning !important;
}

/* #endif */

.tui-success-hover {
	background: $uni-success-disable !important;
	color: #e5e5e5 !important;
}

.tui-success-outline {
	color: $success !important;
	background: transparent;
	/* #ifdef MP-QQ */
	border: 1rpx solid $success !important;
	/* #endif */
}

/* #ifndef MP-QQ */
.tui-success-outline::after {
	border: 1px solid $success !important;
}

/* #endif */

/* #ifndef APP-NVUE */
.tui-btn-gradual {
	background: linear-gradient(90deg, rgb(255, 89, 38), rgb(240, 14, 44)) !important;
	color: #fff !important;
}

.tui-shadow-gradual {
	box-shadow: 0 10rpx 14rpx 0 rgba(235, 9, 9, 0.15);
}

/* #endif */

.tui-gray-hover {
	background: #a3a3a3 !important;
	color: #898989;
}

/* #ifndef APP-NVUE */
.tui-gradual-hover {
	background: linear-gradient(90deg, #d74620, #cd1225) !important;
	color: #fff !important;
}

/* #endif */

.tui-gray-outline {
	color: #999 !important;
	background: transparent !important;
}

.tui-white-outline {
	color: #fff !important;
	background: transparent !important;
	/* #ifdef MP-QQ */
	border: 1rpx solid #fff !important;
	/* #endif */
}

.tui-black-outline {
	background: transparent !important;
	color: #333 !important;
	/* #ifdef MP-QQ */
	border: 1rpx solid #ccc !important;
	/* #endif */
}

/* #ifndef MP-QQ */
.tui-gray-outline::after {
	border: 1px solid #ccc !important;
}

/* #endif */

/* #ifndef MP-QQ */
.tui-white-outline::after {
	border: 1px solid #fff !important;
}

.tui-black-outline::after {
	border: 1px solid #333 !important;
}

/* #endif */

/*圆角 */

.tui-fillet {
	border-radius: 50rpx;
}

.tui-btn-white.tui-fillet::after {
	border-radius: 98rpx;
}

.tui-outline-fillet::after {
	border-radius: 98rpx;
}

/*平角*/
.tui-rightAngle {
	border-radius: 0;
}

.tui-btn-white.tui-rightAngle::after {
	border-radius: 0;
}

.tui-outline-rightAngle::after {
	border-radius: 0;
}

/* #ifdef MP-QQ */
.tui-btn__link {
	border: 0 !important;
}

/* #endif */

.tui-btn__link::after {
	border: 0 !important;
}
</style>
